<template>
    <!-- 二级管理员page -->
    <div class="admin2-list">
        <div style="padding: 10px;">
            <el-button  @click="dialogVisible = true" type="info " size="large">添加管理员</el-button>
        </div>
        
        <div style="width: 70vw;">
            <el-descriptions
                title="管理员列表"
                direction="vertical"
                :column="6"
                border
            >
                <view v-for="item,index in admin2List" :key="index">
                    <view  v-if="index==0">
                        <el-descriptions-item>
                            <img style="width: 50px;height: 40px;" :src="'https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/'+item.avatar" alt=""/>
                        </el-descriptions-item>
                        <el-descriptions-item label="姓名">{{ item.name }}</el-descriptions-item>
                        <el-descriptions-item label="email">{{ item.email }}</el-descriptions-item>
                        <el-descriptions-item label="区域">{{ item.position }}</el-descriptions-item>
                        <el-descriptions-item label="电话">{{ item.telephone }}</el-descriptions-item>
                        <el-descriptions-item label="操作">
                            <el-button type="warning" style="margin-left: 16px" @click="updateAdminWay(item.id)">
                                修改
                            </el-button>
                            <el-button type="danger" style="margin-left: 16px" @click="delAdmin(item.id)">删除</el-button>
                        </el-descriptions-item>
                    </view>
                    <view v-else>
                        <el-descriptions-item>
                            <img style="width: 50px;height: 40px;" :src="'https://xxgc-lin-blog.oss-cn-chengdu.aliyuncs.com/'+item.avatar" alt=""/>
                        </el-descriptions-item>
                        <el-descriptions-item>{{ item.name }}</el-descriptions-item>
                        <el-descriptions-item>{{ item.email }}</el-descriptions-item>
                        <el-descriptions-item>{{ item.position }}</el-descriptions-item>
                        <el-descriptions-item>{{ item.telephone }}</el-descriptions-item>
                        <el-descriptions-item>
                            <el-button type="warning" style="margin-left: 16px" @click="updateAdminWay(item.id)">
                                修改
                            </el-button>
                            <el-button type="danger" style="margin-left: 16px"  @click="delAdmin(item.id)">删除</el-button>
                        </el-descriptions-item>
                    </view>
                </view>
            </el-descriptions>
        </div>
        <!-- 分页 -->
        <div>
            <el-pagination background
             layout="prev, pager, next" 
             :total="Math.ceil(total/5)*10"
             :current-page="current"
             @current-change="currentPage"
             />
        </div>
        <!-- 添加管理员拟态框 -->
        <el-dialog
            v-model="dialogVisible"
            title="添加管理员"
            :before-close="onClose"
        >
        <!--  -->
        <form class="insAdmin">
            <!-- 隐藏框 -->
            <input type="hidden" name="id" value=""/>
            <div>
                <label for="avatar">头像：</label>
                <input type="file" id="avatar" name="file">
            </div>
            <div>
                <label for="account">账号：</label>
                <input type="text" id="account" name="account">
            </div>
            <div>
                <label for="name">姓名：</label>
                <input type="text" id="name" name="name">
            </div>
            <div>
                <label for="password">密码：</label>
                <input type="password" id="password" name="password">
            </div>

            <div>
                <label for="email">邮箱：</label>
                <input type="text" id="email" name="email">
            </div>
            <div>
                <label for="telephone">电话：</label>
                <input type="text" id="telephone" name="telephone">
            </div>
            <div>
                <el-button type="primary" @click="insAdmin">添加</el-button>
            </div>
        </form>
        </el-dialog>

        <!-- 修改管理员拟态框 -->
        <el-drawer v-model="updateAdmin" :direction="direction">
            <template #header>
            <h4>修改管理员</h4>
            </template>
            <template #default>
                <form class="upAdmin">
                    <!-- 隐藏框 -->
                    <input type="hidden" name="id" v-model="admin.id"/>
                    <div>
                        <label for="avatar">头像：</label>
                        <input type="file" id="avatar" name="file">
                    </div>
                    <div>
                        <label for="account">账号：</label>
                        <input type="text" id="account" name="account" v-model="admin.account"/>
                    </div>
                    <div>
                        <label for="name">姓名：</label>
                        <input type="text" id="name" name="name" v-model="admin.name">
                    </div>
                    <div>
                        <label for="password">密码：</label>
                        <input type="text" id="password" name="password" v-model="admin.password"/>
                    </div>

                    <div>
                        <label for="email">邮箱：</label>
                        <input type="text" id="email" name="email" v-model="admin.email">
                    </div>
                    <div>
                        <label for="telephone">电话：</label>
                        <input type="text" id="telephone" name="telephone" v-model="admin.telephone">
                    </div>
                    <div>
                        <el-button type="primary" @click="upAdmin">修改</el-button>
                    </div>
                </form>
            </template>
        </el-drawer>
    </div>
</template>
<script>
import RegionalAdministrators from '@/api/RegionalAdministrators';
// import axios from 'axios';


export default{
    data(){
        return{
            updateAdmin:false,
            dialogVisible:false,
            admin2List:[],
            current:0,
            hasNext: false,
            hasPrevious:true,
            size:0,
            total:0,
            admin:{
                id:0,
                avatar:'',
                account:'',
                name:'',
                password:'',
                email:'',
                position:'',
                telephone:'',
            }
        }
    },
    methods:{
        delAdmin(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                RegionalAdministrators.admin2Del(
                    id
                ).then(res=>{
                    if(res.code==200){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.initPage(this.current,5)
                    }else{
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    }
                }) 
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        upAdmin(){
            var form=document.querySelector('.upAdmin')
            var formData=new FormData(form)
            RegionalAdministrators.admin2Ucg(formData).then(res=>{
                if(res.code==200){
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.initPage(this.current,5)
                }else{
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            })
        },
        // 调出修改管理员页面
        updateAdminWay(id){
            // 数据回显
            RegionalAdministrators.admin2Information(id).then(res=>{
                this.admin.id=id
                this.admin.account=res.data.account
                this.admin.password=res.data.password
                this.admin.email=res.data.email
                this.admin.name=res.data.name
                this.admin.telephone=res.data.telephone
                this.admin.position=res.data.position

            })
            this.updateAdmin=true

        },
        // 添加管理员
        insAdmin(){
            var form=document.querySelector('.insAdmin')
            var formData=new FormData(form)
            RegionalAdministrators.admin2Ins(formData).then(res=>{
                console.log(res)
                if(res.code==200){
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.initPage(this.current,5)
                }else{
                    this.$message({
                        message: '添加失败',
                        type: 'error'
                    });
               }
            })
        },

        // 当前页面
        currentPage(newPage){
            this.current = newPage;
            this.initPage(this.current,5)
        },
        // 初始化
        initPage(pageNum,pageSize){
          RegionalAdministrators.admin2List({
                "pageNum": pageNum,
                "pageSize": pageSize
            }).then((res)=>{
                console.log(res)
                this.admin2List = res.data.records;
                this.current = res.data.current;
                this.hasNext = res.data.hasNext;
                this.hasPrevious = res.data.hasPrevious;
                this.size = res.data.size;
                this.total = res.data.total;
          })
        },
    },
    mounted() {
        this.initPage(1,5);
    }

}

</script>
<style lang="scss">
.admin2-list{
    form {
        max-width: 500px;
        margin: 50px auto;
        padding: 20px;
        background-color: #f8f9fa;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    div {
        margin-bottom: 15px;
    }
    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    input[type="file"],
    input[type="text"],
    input[type="password"],
    input[type="email"] {
        width: 100%;
        padding: 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        box-sizing: border-box;
    }
    input[type="file"]:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    input[type="email"]:focus {
        outline: none;
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
    }
</style>